<template>
  <div class="Echarts" style="height: 100%;">
    <div :id="id" style="height: 100%;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      echartsSample: null
    }
  },
  props: {
    id: '',
    option: {
      type: Object,
      default: function () {
        return {
          title: {
            text: 'Echarts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5,20,36,10,10,20]
          }]
        }
      }
    }
  },
  watch: {
    option: {
      handler (newValue, oldValue) {
        this.drawEcharts()
      },
      deep: true
    }
  },
  mounted(){
    this.drawEcharts()
  },
  methods: {
    drawEcharts(){
      let _this = this
      this.echartsSample = echarts.init(document.getElementById(this.id))
      this.echartsSample.setOption(this.option)
      window.addEventListener('resize', function() {
        _this.echartsSample.resize()
      })
    }
  },
  beforeDestory() {
    if(this.echartsSample){
      this.echartsSample.clear()
    }
  }
}
</script>

<style>

</style>
